<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    * {
        margin:0;
        padding:0;
    }
    ul {
        overflow:hidden;
        list-style:none;
        width:300px;
        height:300px;
    }
    ul li {
        float:left;
        width:20px;
        height:20px;
        padding:5px;
    }
    ul li div {
        border:1px solid blue;
        width:100%;
        height:100%;
    }

</style>
<body>
<ul id="zxjUl">
    <li>
        <div></div>
    </li>
    <li>
        <div></div>
    </li>
    <li>
        <div></div>
    </li>
    <li>
        <div></div>
    </li>
    <li>
        <div></div>
    </li>
    <li>
        <div></div>
    </li>
</ul>
</body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
    function keyThing(obj) {
        var index;
        $("#zxjUl>li").on("click", function() {
            $(this).siblings().find("div").css(obj.cssKey, "transparent");
            $(this).find("div").css(obj.cssKey, obj.cssValue);
            index = $(this).index() + 1;
        })
        $(document).on("keydown", function(event) {
            var e = event || window.event || arguments.callee.caller.arguments[0];
            //console.log(e.keyCode);//获取键对应的keyCode
            if (index != undefined) {
                /*  if(flag){
                 clear();
                 }*/
                if (e.keyCode == 40) {
                    if (index > $("#zxjUl>li").length - obj.row) {
                        return false;
                    } else {
                        index = index + obj.row;
                        clear();
                    }
                    $("#zxjUl>li").eq(index - 1).find("div").css(obj.cssKey, obj.cssValue);
                } else if (e.keyCode == 38) {
                    if (index < 10) {
                        return false;
                    } else {
                        index = index - obj.row;
                        clear();
                    }
                    $("#zxjUl>li").eq(index - 1).find("div").css(obj.cssKey, obj.cssValue);
                } else if (e.keyCode == 39) {
                    if (index > $("#zxjUl>li").length - 1) {
                        return false;
                    } else {
                        clear();
                        index = index + 1;
                    }
                    $("#zxjUl>li").eq(index - 1).find("div").css(obj.cssKey, obj.cssValue);
                } else if (e.keyCode == 37) {
                    if (index < 2) {
                        return false;
                    } else {
                        clear();
                        index = index - 1;
                    }
                    $("#zxjUl>li").eq(index - 1).find("div").css(obj.cssKey, obj.cssValue);
                }
                //获取到每一次点击键盘后的对应的索引值。
                obj.callback(index);
            } else {
                if (e.keyCode) {
                    index = 1;
                    $("#zxjUl>li").eq(0).find("div").css(obj.cssKey, obj.cssValue);
                }
            }
        })

        function clear() {
            for (var i = 0; i < $("#zxjUl>li").length; i++) {
                $("#zxjUl>li").eq(i).find("div").css(obj.cssKey, "transparent");
            }
        }
    }
    var obj = {};
    obj.row = 10;
    obj.cssKey = "backgroundColor";
    obj.cssValue = "blue";
    obj.callback = function(n) {
        //此处可以输出对应的索引值。
        console.log(n);
    }
    //console.log(obj.callback);
    keyThing(obj);
</script>